<template>
  <div class="shop">
    <top-module bgColor="#FF7CB7">
      <div class="tit" slot="center">
        购物车
      </div>
    </top-module>
    <div class="shopCardList"  v-for="(item,index) in shopLists" :key="index">
      <shop-card :item="item" @Price="Price"></shop-card>
    </div>
    <!-- 去结算 -->
    <div class="shopAccount">
      <div class="left">
        <div class="allSelect">
          <!-- <van-icon name="passed" /> -->
          <p class="aa"><span @click="cutSelect" vaule="Select" :class="Select?'yes':'no'">✔</span></p>
          全选
        </div>
        <p>
          总价：<span>¥{{$store.getters.allPrice}}</span>
        </p>
      </div>
      <div class="rigth">去结算<span>({{}})</span></div>
    </div>
    <bottom-module></bottom-module>
  </div>
</template>

<script>
//引入组件
import bottomModule from "../components/commonality/bottomModule.vue"; //底部
import ShopCard from "../components/commonality/shopCard.vue"; //购物车卡片
import TopModule from "../components/commonality/topModule.vue"; //头部
import { mapState } from "vuex";
export default {
  components: { bottomModule, TopModule, ShopCard },
  name: "shop",
  data() {
    return {
      Select: false,
      shopLists: [],
      allPrice: 0, //总价
    };
  },
  mounted() {
    this.shopLists = this.shopList;
  },
  computed: {
    ...mapState(["shopList"]),
  },
  methods: {
    Price() {
     
    },
    cutSelect() {
      //改变对钩的样式
        this.Select = !this.Select;
    },
  },
};
</script>

<style lang="scss" scoped>
.shop {
  width: 100%;
  .tit {
    width: 100%;
    line-height: 50px;
    text-align: center;
    font-size: 19px;
    color: #fff;
  }
  .shopCardList {
    margin-top: 50px;
  }
  .shopAccount {
    width: 100%;
    color: #333;
    position: fixed;
    left: 0;
    bottom: 60px;
    display: flex;
    line-height: 50px;
    font-size: 18px;
    .left {
      flex: 5;
      background: #deddde;
      display: flex;
      padding-left: 15px;
      .allSelect {
        padding-right: 15px;
        display: flex;
        .aa {
          width: 30px;
        }
        .yes {
          // width: 20px;
          // height: 20px;
          // display: inline-block;
          background: #ff7cb7;
          border-radius: 50%;
          padding: 1.5px 4px;
          color: #fff;
          font-size: 15px;
        }
        .no {
          border-radius: 50%;
          padding: 1.5px 4px;
          background: #fff;
          color: #777;
          font-size: 15px;
          border: #777 1px solid;
        }
      }
    }
    .rigth {
      flex: 2;
      background: #ff5300;
      color: #fff;
      padding-left: 14px;
    }
  }
}
</style>